<template>


  <div class="loginBox" style="margin-top: 100px">
    <div class="loginBoxCenter">
      <el-form
          ref="formRef"
          label-width="100px"
          :model="loginObj"
          style="max-width: 460px"
      >
        <el-form-item label="用户名" required prop="name">
          <el-input v-model="loginObj.name" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码" required prop="password">
          <el-input
              v-model="loginObj.password"
              type="password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label="登陆类型" required prop="role">
          <el-radio-group v-model="loginObj.role">
            <el-radio size="small" label="consumer">消费者</el-radio>
            <el-radio size="small" label="supplier">供应商</el-radio>
            <el-radio size="small" label="admin">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="loginBoxButtons">
      <el-button plain type="primary" @click="drawer=true">注册</el-button>
      <el-button type="primary" @click="login">登陆</el-button>
    </div>
  </div>

  <el-drawer v-model="drawer" size="70%">
    <el-form
        ref="registerForm"
        label-width="100px"
        :model="registerObj"
        style="max-width: 460px"
    >
      <el-form-item label="用户名" required prop="name">
        <el-input v-model="registerObj.name" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" required prop="password">
        <el-input
            v-model="registerObj.password"
            type="password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="类型" required prop="role">
        <el-radio-group v-model="registerObj.role">
          <el-radio size="small" label="consumer">消费者</el-radio>
          <el-radio size="small" label="supplier">供应商</el-radio>
          <el-radio size="small" label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话" required prop="phone">
        <el-input v-model="registerObj.phone" placeholder="请输入电话"/>
      </el-form-item>
      <transition name="fade">
        <el-form-item label="性别" required prop="gender" v-if="registerObj.role==='consumer'">
          <el-radio-group v-model="registerObj.gender">
            <el-radio size="small" label="1">男</el-radio>
            <el-radio size="small" label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </transition>
      <el-form-item>
        <el-button plain type="primary" @click="submitRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

</template>

<script setup>
import {reactive, ref} from 'vue'
import axios from "~/config/axios.js";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
import router from "~/config/router.js";
import {localSet} from "~/config/utils.js";
import {localKeys} from "~/config/const.js";

const formRef = ref()
const loginObj = reactive({
  name: '',
  password: '',
  role: '',
})
const login = () => {
  formRef.value.validate(async (ok) => {
    if (ok) {
      const {token, casId} = await axios.post("/login", loginObj, {headers: loginObj});
      ElMessage.success("登陆成功")
      if (loginObj.role === 'consumer') {
        await router.push("/user/browse/train")
      } else if (loginObj.role === 'supplier') {
        await router.push("/supplier/browse/train")
      } else if (loginObj.role === 'admin') {
        await router.push("/admin/browse/train")
      }
    }
  })
}

// -------------------------------------
const drawer = ref(false)
const registerForm = ref()
const registerObj = ref({})
const submitRegister =  () => {
  registerForm.value.validate(async(ok) => {
    await axios.post(`/register/${registerObj.value.role}`,registerObj.value)
    ElMessage.success("成功")
    location.reload()
  })
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

html {
  background-color: #B5DEF2;
}

.loginBox {
  background-color: #F0F4F6;
  /*上divcolor*/
  border: 1px solid #BfD6E1;
  border-radius: 5px;
  color: #444;
  /*font: 14px 'Microsoft YaHei', '微软雅黑';*/
  margin: 0 auto;
  width: 388px
}

.loginBox .loginBoxCenter {
  border-bottom: 1px solid #DDE0E8;
  padding: 24px;
}

.loginBox .loginBoxCenter p {
  margin-bottom: 10px
}

.loginBox .loginBoxButtons {
  /*border-top: 0px solid #FFF;*/
  /*border-bottom-left-radius: 5px;*/
  /*border-bottom-right-radius: 5px;*/
  /*line-height: 28px;*/
  /*overflow: hidden;*/
  padding: 20px 24px;
  vertical-align: center;
  /*-moz-opacity: 0.5;*/
  /*opacity: 0.5;*/
}


</style>